<template>
  <el-dialog
    ref="ykRulesRef"
    :title="$t('message.ykgz')"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    :visible.sync="isShowYkRules"
    :before-close="ykCloseDrawer"
    append-to-body
    width="870px"
  >
    <div class="ykList">
      <div class="warnningTip">{{ $t('message.xtsckcsm') }}</div>
      <div class="mb20 df_ac">
        <div class="rule_label">{{ $t('message.ykls') }}：</div>
        {{ teacherName }}
      </div>
      <div class="df">
        <span class="rule_label"><span class="secondColor">*</span>{{ $t('message.sksj') }}：</span>
        <div>
          <div v-for="item,index in TeacherRule" :key="index" class="yk_item df_ac">
            <el-select v-model="item.daysTemp" collapse-tags multiple class="mr10" style="width: 140px;" clearable :placeholder="$t('message.zjsk')">
              <el-option
                v-for="op in weekDays"
                :key="op.value"
                :label="op.label"
                :value="op.value"
              />
            </el-select>
            <el-select v-model="item.courseId" class="w200 mr20" clearable :placeholder="$t('message.skkc')">
              <el-option
                v-for="op in pubCourseList"
                :key="op.courseId"
                :label="op.courseName"
                :value="op.courseId"
              />
            </el-select>
            <el-time-select
              v-model="item.beginTime"
              :picker-options="{
                start: '06:00',
                step: '00:05',
                end: '22:00'
              }"
              :placeholder="$t('message.kssj')"
              class="w120"
              value-format="HH:mm"
              format="HH:mm"
              @change="selTimeChange(item)"
            />
            <span class="ml10 mr10"> {{ $t('message.zhi2') }} </span>
            <el-time-select
              v-model="item.endTime"
              :picker-options="{
                start: item.beginTime || '06:00',
                step: '00:05',
                end: '22:00'
              }"
              class="w120"
              :placeholder="$t('message.jssj')"
              value-format="HH:mm"
              format="HH:mm"
              @change="selTimeChange(item)"
            />
            <!-- <span class="mr10 ml10 primaryColor pointer" @click="teacherRuleCopy(item)">复制</span> -->
            <span v-if="index !== 0" class="ml10 secondColor pointer" @click="teacherRuleDel(index)">{{ $t('message.del') }}</span>
          </div>
          <div class="df_ac">
            <div type="primary" class="add_btn" @click="ykAdd">+{{ $t('message.zjsj') }}</div>
          </div>
        </div>
      </div>
      <div v-if="selTeacherRule.length > 0" class="df mb20">
        <span class="rule_label">{{ $t('message.ytjkc') }}：</span>
        <div class="sel_teacher_rule flex1">
          <template v-for="item,index in selTeacherRule">
            <div v-if="item.beginTime && item.endTime && item.day && item.courseName && item.courseId" :key="index" class="item">
              <span> {{ item.day }}</span>
              <span class="ml10 mr10"> {{ item.courseName.slice(0, 10) }}<span v-if="item.courseName.length > 9">...</span></span>
              <span> {{ item.beginTime }}</span>
              <span> ~ </span>
              <span> {{ item.endTime }}</span>
            </div>
          </template>
        </div>
      </div>
      <div>
        <el-button v-preventReClick :loading="ykSubLoading" type="primary" @click="subTeacherRule">{{ $t('message.qr') }}</el-button>
        <el-button @click="isShowYkRules = false">{{ $t('message.qx') }}</el-button>
      </div>
    </div>
  </el-dialog>

</template>

<script>
import {
  closeTeacher,
  getTeacherRule,
  updateTeacherRule,
  publishCourseList
} from '@/api'
import store from '@/store'
import { weekDays } from './config'
export default {
  props: {
    teacherId: {
      type: String,
      default: () => {}
    },
    teacherName: {
      type: String,
      default: () => {}
    }
  },
  data() {
    return {
      modalDialog: store.getters.dialog,
      isShowChannel: false,
      isShowYkRules: false,
      TeacherRule: [],
      ykSubLoading: false,
      pubCourseList: [],
      ykForm: {},
      weekDays,
      venueId: sessionStorage.getItem('venueId'),
      rules: {
        videoNumberIdTemp: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        videoIdTemp: [{ required: true, message: this.$t('message.qsr'), trigger: 'blur' }],
        teacherImage: [
          { required: true, message: this.$t('message.qsc') + this.$t('message.jltx'), trigger: 'blur' }
        ],
        teacherName: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.jlxm'), trigger: 'blur' }
        ],
        phone: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.sjh'), trigger: 'blur' }
        ],
        sex: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.sex'), trigger: 'change' }
        ],
        isOnJob: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.zzzt'), trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: this.$t('message.qzsxzygsklx'), trigger: 'change' }
        ],
        info: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.jljs'), trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    selTeacherRule() {
      const temp = []
      const dayMap = ['', this.$t('message.z1'), this.$t('message.z2'), this.$t('message.z3'), this.$t('message.z4'), this.$t('message.z5'), this.$t('message.z6'), this.$t('message.z7')]
      const TeacherRule = this.TeacherRule
      const pubCourseList = this.pubCourseList
      TeacherRule.forEach(item => {
        if (item.courseId) {
          const temp = pubCourseList.find(i => i.courseId === item.courseId)
          if (temp && temp.courseName) {
            item.courseName = temp.courseName
          } else {
            item.courseName = item.courseName || ''
          }
        }
        if (item.daysTemp && item.daysTemp.length > 0) {
          item.daysTemp.forEach(item2 => {
            const obj = {
              day: dayMap[item2],
              dayNum: item2,
              courseName: item.courseName || '',
              courseId: item.courseId || '',
              beginTime: item.beginTime,
              endTime: item.endTime
            }
            temp.push(obj)
          })
        }
      })
      temp.sort((a, b) => {
        return a.dayNum - b.dayNum
      })
      return temp
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
  },
  methods: {
    subTeacherRule() {
      // return
      let count = 0
      const TeacherRule = [...this.TeacherRule]
      const temp = TeacherRule.map(item => {
        if (!item.beginTime || !item.endTime || !item.courseId || item.daysTemp.length === 0) {
          count++
          return
        }
        item.days = item.daysTemp.join(',')
        return item
      })
      if (count > 0) {
        return this.$message.warning(this.$t('message.sygzbt'))
      }
      this.ykSubLoading = true
      updateTeacherRule({
        param: {
          ruleData: temp,
          teacherId: this.teacherId
        }
      }).then(res => {
        this.ykSubLoading = false
        if (res.errorCode !== '000000') return
        this.$message.success(this.$t('message.tjcg'))
        this.isShowYkRules = false
        this.$emit('success')
      }, () => {
        this.ykSubLoading = false
      })
    },
    ykAdd() {
      this.TeacherRule.push({
        courseId: '',
        daysTemp: []
      })
    },
    teacherRuleDel(i) {
      const TeacherRule = [...this.TeacherRule]
      TeacherRule.splice(i, 1)
      this.TeacherRule = TeacherRule
    },
    teacherRuleCopy(row) {
      const temp = JSON.parse(JSON.stringify(row))
      this.TeacherRule.push(temp)
    },
    getPublishCourseList() {
      publishCourseList({
        param: {
          courseType: '4',
          venueIds: [sessionStorage.getItem('venueId')]
        }
      }).then(res => {
        this.pubCourseList = res.recordList || []
      })
    },
    // 约课规则 获取
    getTeacherRules() {
      getTeacherRule({ param: { teacherId: this.teacherId }}).then(res => {
        this.TeacherRule = res.recordList.map(item => {
          if (item.days) {
            item.daysTemp = item.days.split(',')
          }
          return item
        })
        if (this.TeacherRule.length === 0) {
          this.TeacherRule.push({
            daysTemp: []
          })
        }
      })
    },
    rowClickDel(row) {
      this.$confirm(this.$t('message.scjltc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          closeTeacher({ param: { teacherId: row.teacherId, type: 1 }}).then((res) => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              this.$message.success(this.$t('message.delcg'))
              this.getList(1)
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => {})
    },
    rowRuleClick() {
      this.isShowYkRules = true
      this.$nextTick(() => {
        this.getPublishCourseList()
        this.getTeacherRules()
      })
    },

    ykCloseDrawer() {
      this.isShowYkRules = false
    },
    // 约课规则 时间限制
    selTimeChange(item) {
      if (item.beginTime && item.endTime && item.beginTime > item.endTime) {
        item.endTime = null
        return this.$message.warning(this.$t('message.jssjydykssj'))
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.sel_teacher_rule{
  display: flex;
  flex-wrap: wrap;
  max-height: 260px;
  overflow: auto;
  border: 1px solid #F7F7F7;
  border-radius: 8px;
  padding: 12px;
  .item{
    width: 319px;
    height: 30px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    background-color: #F7F7F7;
    margin-bottom: 10px;
    margin-right: 10px;
    padding-left: 20px;
    &:nth-of-type(2n){
      margin-right: 0;
    }
  }
}
.courseRuleInfo_wrap{
  width: 100%;
  margin-bottom: 40px;
  .item{
    margin-bottom: 8px;
  }
}
.rule_label{
  width: 120px;
  text-align: right;
}
.ykList{
  width: 100%;
  .yk_item{
    margin-bottom: 12px;
  }
  .add_btn{
    text-align: center;
    width: 680px;
    height: 36px;
    line-height: 36px;
    color: var(--primaryColor);
    background: #F4F7FC;
    cursor: pointer;
    margin-bottom: 20px;
  }
}
.detail_info{
  .header{
    .img{
      width: 80px;
      height: 80px;
      margin-right: 10px;
    }
    .content{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}
.device-uploader {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}

.edit-btn {
  display: flex;
  flex-direction: row-reverse;
}
.title-style {
  font-size: 22px;
  font-weight: 500;
  line-height: 36px;
  color: #000;
  margin-bottom: 20px;
}
</style>
